// @ts-nocheck
import {useState, useRef} from 'react'
import {PageHeaderWrapper} from '@ant-design/pro-layout';
import {
  Button,
  Divider,
  message, Popconfirm
} from 'antd'
import {DownloadOutlined, ImportOutlined, PlusOutlined, QuestionCircleOutlined} from '@ant-design/icons'
import ProTable from '@ant-design/pro-table'
import {useModel} from "@@/plugin-model/useModel";
import {Access} from "@@/plugin-access/access";
import {authority} from "@/tools/tool";
import {getPackage, delPackage, UploadPackage, downloadPackage} from '@/services/package'
import CreateModify from './extra/createModify'
import ExcelData from "@/components/Common/ExcelData";

const Index = () => {
  const actionRef = useRef()
  const init = useModel('@@initialState');
  const [mode, setMode] = useState('create')
  const [visible, setVisible] = useState(false)
  const [data, setData] = useState({})
  const keys = ['套餐名称', '套餐周期', '套餐上行', '套餐下行', '套餐金额']
  const [importVisible, setImport] = useState(false)
  const {currentUser} = init.initialState
  const delPackageData = (id: any) => {
    message.warn('正在删除').then()
    delPackage({packageId: id}).then(res => {
      if (res.status === 200) {
        message.success(res.message).then()
        actionRef.current.reload()
      } else {
        message.error(res.message).then()
      }
    })
  }
  const handleImport = (e) => {
    console.log(e)
    UploadPackage({list: e}).then(res => {
      if (res.status === 200) {
        message.success(res.message).then()
        setImport(false)
        actionRef.current.reload()
      } else {
        message.error(res.message).then()
      }
    })
  }
  const columns = [
    {
      title: '套餐名称',
      dataIndex: 'package_name'
    },
    {
      title: '套餐周期',
      dataIndex: 'package_duration',
      hideInSearch: true,
      render: (text) => `${text} /月`
    },
    {
      title: '套餐上行',
      dataIndex: 'package_speed_up',
      hideInSearch: true,
      render: (text) => `${text} /M`

    },
    {
      title: '套餐下行',
      dataIndex: 'package_speed_down',
      hideInSearch: true,
      render: (text) => `${text} /M`
    },
    {
      title: '套餐金额',
      dataIndex: 'package_price',
      hideInSearch: true,
      valueType: "money"
    },
    {
      title: '操作',
      fixed: 'right',
      valueType: 'option',
      render: (_: any, row: any) => [
        <Access key={'2'} accessible={authority('21', currentUser.operation)}>
          <a onClick={() => {
            setMode('modify');
            setVisible(true);
            setData(row)
          }}>
            修改
          </a>
        </Access>,
        <Divider key={'3'} type="vertical"/>,
        <Access key={'4'} accessible={authority('22', currentUser.operation)}>
          <Popconfirm title="是否删除当前套餐？" icon={<QuestionCircleOutlined style={{color: 'red'}}/>}
                      onConfirm={() => {
                        delPackageData(row.package_id)
                      }}>
            <a href="#">删除</a>
          </Popconfirm>
        </Access>
      ]
    }
  ]
  const download = () => {
    downloadPackage().then(res => {
      const blob = new Blob([res], {type: 'application/vnd.ms-excel;charset=utf-8'});
      const a = document.createElement('a');
      a.href = window.URL.createObjectURL(blob)
      a.download = decodeURIComponent(`套餐样例.xls`);
      document.body.appendChild(a);
      a.click();
      message.success('下载成功').then()
    })
  }
  return (
    <PageHeaderWrapper>
      <ProTable
        actionRef={actionRef}
        columns={columns}
        request={(params) => getPackage(params)}
        toolBarRender={() => [
          <Access key={'1'} accessible={authority('67', currentUser.operation)}>
            <Button key="button" icon={<DownloadOutlined/>} type="primary" onClick={() => download()}>
              下载套餐样例
            </Button>
          </Access>,
          <Access key={'2'} accessible={authority('64', currentUser.operation)}>
            <Button key="button" icon={<ImportOutlined/>} type="primary" onClick={() => {
              setImport(true)
            }}>
              导入套餐
            </Button>
          </Access>,
          <Access key={'3'} accessible={authority('20', currentUser.operation)}>
            <Button key="button" icon={<PlusOutlined/>} type="primary" onClick={() => {
              setVisible(true);
              setMode('create')
            }}>
              新增套餐
            </Button>
          </Access>
        ]}
      />
      <CreateModify
        visible={visible}
        mode={mode}
        data={data}
        onClose={() => {
          setVisible(false);
          actionRef.current.reload();
          setData({})
        }}
        onOk={() => {
          setVisible(false);
          actionRef.current.reload();
          setData({})
        }}
      />
      <ExcelData
        keyList={keys}
        visible={importVisible}
        onClose={() => setImport(false)}
        onOk={(e) => handleImport(e)}
      />
    </PageHeaderWrapper>
  );
};

export default Index;
